﻿// bind to window onload event
window.addEventListener('load', onloadHandler, false);

function onloadHandler() {
    // get the canvas DOM element
    var canvas = document.getElementById('canvas');
    document.getElementById('debug').innerHTML = canvas;
    var loader = new Preloader();

    var bitmaps = [];

    for (var i = 0; i < 20; i++) {
        bitmaps.push(new Image());
        loader.addImage(bitmaps[i], 'images/' + i + '.png');
    }

    // bind a K3D Controller object to the canvas
    // - it is responsible for managing the K3D objects displayed within it
    var k3d = new K3D.Controller(canvas);
    // request 60 frames per second animation from the controller
    k3d.fps = 60;

    // create a K3D object for rendering
    var obj = new K3D.K3DObject();
    with (obj) {
        color = [255, 0, 0];        // colour used for wireframe edges and depthcues
        drawmode = "solid";         // one of "point", "wireframe", "solid"
        shademode = "lightsource";  // one of "plain", "depthcue",
                                    // "lightsource" (solid drawing mode only)
        addphi = 1.0;               // 1 degree of rotation around Y axis per frame
        scale = 100;                // make fifty times bigger
        init(
            // describe the points
            [
                { x: 0, y: 0, z: 0 }, // G of the object - 0
                { x: -Math.sqrt(3) / 3, y: -0.3, z: -Math.sqrt(3) / 3 }, // G of first face - 1
                { x: 0, y: -0.3, z: -Math.sqrt(3) / 3 }, // G of second face - 2
                { x: Math.sqrt(3) / 3, y: -0.3, z: Math.sqrt(3) / 3 }, // G of third face - 3
                { x: 0, y: -Math.sqrt(3) / 3, z: 0 }, // G of forth face - 4
                { x: 0, y: 1, z: 0 }, // top - 5
                { x: -1, y: -Math.sqrt(3) / 3, z: -Math.sqrt(3) / 3 }, // left - 6
                { x: 1, y: -Math.sqrt(3) / 3, z: -Math.sqrt(3) / 3 }, // right - 7
                { x: 0, y: -Math.sqrt(3) / 3, z: ((2 * Math.sqrt(3)) / 3) }, // front - 8
                { x: 1, y: -1, z: 1 }, // mid of edge left - 9
                { x: 1, y: -1, z: 1 }, // mid of edge right - 10
                { x: 1, y: -1, z: 1 }, // mid of edge front - 11
                { x: 1, y: -1, z: 1 }, // mid of bottom edge left - 12
                { x: 1, y: -1, z: 1 }, // mid of bottom edge right - 13
                { x: 1, y: -1, z: 1 }, // mid of bottom edge back - 14
                { x: 0, y: 100, z: 0 },
                { x: 0, y: -100, z: 0 },
                { x: 100, y: 0, z: 0 },
                { x: -100, y: 0, z: 0 }
            ],
            // describe the edges
            [
                //{a:0,b:1},
                //{a:0,b:2},
                //{a:0,b:3},
                //{a:0,b:4},
                //{a:0,b:5},
                { a: 5, b: 6 },
                { a: 6, b: 7 },
                { a: 7, b: 5 },
                { a: 5, b: 8 },
                { a: 8, b: 6 },
                { a: 8, b: 7 },
                { a: 15, b: 16 },
                { a: 17, b: 18 }
            ],
            // describe the faces
            [
                { color: [255, 0, 0], vertices: [5, 6, 7] },
                { color: [0, 255, 0], vertices: [6, 7, 8] },
                { color: [0, 0, 255], vertices: [8, 6, 5] },
                { color: [255, 255, 0], vertices: [5, 7, 8] }
            ]
        );
    }

    // add the object to the controller
    k3d.addK3DObject(obj);

    // begin the rendering and animation immediately
    k3d.paused = true;
    k3d.frame();
}
